<template>
  <div class="page">
    <div class="page_filter">
      <el-select v-model="form.roadId" filterable clearable placeholder="选择路线" @change="changeRoad">
        <el-option
          v-for="item in roadList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.roadSectionId" filterable clearable placeholder="选择标段">
        <el-option
          v-for="item in bidSectionList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
      <el-select v-model="form.nowRiskLevel" filterable clearable placeholder="选择风险等级" >
      <el-option
        v-for="item in EnumRiskLevelList"
        :key="item.code"
        :label="item.name"
        :value="item.code">
      </el-option>
    </el-select>

      <el-button class="common_btn-defalut" icon="el-icon-search" @click="form.page=1;queryList()">搜索</el-button>
    </div>
    <div class="page_main">
      <div class="change-type">
        <el-radio-group v-model="dataType" @change="queryList">
          <el-radio-button label="slope">边坡隐患点
          </el-radio-button>
          <el-radio-button label="road">地质隐患点
          </el-radio-button>
        </el-radio-group>
      </div>

      <!-- table -->
      <el-table
        :data="tableList"
        @expand-change="detailRow" :row-key='getRowKeys' :expand-row-keys="expands"
        border>
        <el-table-column type="expand">
          <template slot-scope="scope">
            <!-- 路段表单 -->
            <el-table :data="scope.row.children || []" border>
              <el-table-column label="序号" width="70">
                <template slot-scope="scope">
                  {{getIndex2(scope.$index)}}
                </template>
              </el-table-column>
              <el-table-column prop="dangerLevelName" min-width="110" label="隐患等级">
                <template slot-scope="scope">
                  <el-tag size="mini" :style="scope.row.dangerLevelName | gradeDangerColor" class="s-white">
                    {{scope.row.dangerLevelName}}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column prop="investigateTypeName" min-width="100" label="排查类型"></el-table-column>
              <el-table-column prop="unitName" show-overflow-tooltip min-width="120" label="排查单位"></el-table-column>
              <el-table-column prop="userName" show-overflow-tooltip min-width="80" label="排查人"></el-table-column>
              <el-table-column prop="investigateTime" width="180" label="排查时间">
                <template slot-scope="scope">{{scope.row.investigateTime | formatTimer}}</template>
              </el-table-column>
              <el-table-column prop="checkStatusName" min-width="100" label="状态">
                <template slot-scope="scope">
                  <el-tag effect="plain" size="mini" :type="scope.row.checkStatusName | gradeCheckColor">{{
                    scope.row.checkStatusName }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column
                label="操作"
                fixed="right"
                width="120">
                <template slot-scope="scope">
                  <button type="text"
                          class="btn_edit"
                          @click="checkInvestigationDetail(scope.row)">
                    查看详情
                  </button>
                </template>
              </el-table-column>
            </el-table>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="70">
          <template slot-scope="scope">
            {{getIndex(scope.$index)}}
          </template>
        </el-table-column>
        <el-table-column width="160"  prop="nowRiskLevelName" label="当前风险等级">
          <template slot-scope="scope">
            <el-tag size="mini" :style="scope.row.nowRiskLevel | gradeRiskLevelColor" class="s-white notice_type">
              {{scope.row.nowRiskLevelName}}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="roadName"
          label="路线">
        </el-table-column>
        <el-table-column
          prop="roadSectionName"
          label="标段">
        </el-table-column>
        <el-table-column
          prop="name"
          min-width="100"
          label="隐患点名称">
        </el-table-column>
        <el-table-column
          width="120"
          prop="startPointStakeNum"
          label="起点桩号">
        </el-table-column>
        <el-table-column
          width="120"
          prop="endPointStakeNum"
          label="止点桩号">
        </el-table-column>
            </el-table>
    </div>
    <el-dialog
      :close-on-click-modal="false"
      title="排查详情"
      :visible.sync="isShowDetailDialog"
      width="800px">
      <slope-detail :key="timer" :currentRow="investigation" :model="2" v-if="dataType === 'slope'" :isLook="false"></slope-detail>
      <geology-detail :key="timer" :currentRow="investigation" :model="2" v-else :isLook="false"></geology-detail>
    </el-dialog>
  </div>

</template>

<script>
  import Enums from '@/utils/enums'
import Format from '@/utils/format'
import {getSlopeList,getDamageList} from '@/services/model/road-mgmt';
import {
  getSlopeInvestigateListByBaseId,
  getDamageInvestigateListByBaseId,
  getSlopeInvestigationDetail,
  getRoadInvestigationDetail,
} from '@/services/model/investigation'
import ItemMixins from "./modules/item.mixins";
import GeologyDetail from "./modules/geology-detail";
import SlopeDetail from "./modules/slope-paicha-detail";

export default {
  components: {GeologyDetail, SlopeDetail},
  mixins: [ItemMixins,Enums],
  data() {
    return {
      getRowKeys(row) {
        return row.id
      },
      timer: '',
      dataType: 'slope',
      investigation: {},
      expands: [],
      // 替换字段
      defaultProps: {
        children: 'subMenu',
        label: 'name'
      },
      // 表单
      form: {
        page: 1,
        pageSize: 10
      },
      tableList: [],
      EnumRiskLevelList: [],
      isShowDetailDialog: false,
    }
  },
  filters: {
    // 时间格式化
    formatTimer(timer) {
      return Format(new Date(timer))
    }
  },
  computed: {
    // 弹窗的title
    dialogTitle() {
      return this.form.id ? '编辑菜单' : '新增菜单'
    }
  },
  created() {
  },
  mounted() {
    this.getRoadList()
    this.queryList()
    this.queryDictList(['EnumRiskLevel'], ['EnumRiskLevelList'])
  },
  methods: {
    // 查看排查详情信息
    async checkInvestigationDetail(row) {
      this.timer = new Date().getTime()
      let action = getRoadInvestigationDetail
      if (this.dataType === 'slope') {
        action = getSlopeInvestigationDetail
      }
      let {data} = await action({id: row.id})
      if (data) {
        this.investigation = JSON.parse(JSON.stringify(data))
      }
      this.isShowDetailDialog = true
    },
    // 获取当前的序号
    getIndex(index) {
      let param = (this.form.page - 1) * this.form.pageSize + index + 1
      return param
    },
    // 获取当前的序号
    getIndex2(index) {
      let param = index + 1
      return param
    },
    // 表格展开时触发
    async detailRow(row, expandedRows) {
      if (expandedRows.length) {
        this.expands = []
        if (row) {
          let action = getDamageInvestigateListByBaseId
          // console.log(this.dataType)
          if(this.dataType === 'slope'){
            action = getSlopeInvestigateListByBaseId
          }
          const {data} = await action({id: row.id})
          row.children = data
          this.expands.push(row.id)
        }
      } else {
        this.expands = []
      }
    },
    //选择路线
    changeRoad() {
      this.$set(this.form, 'roadSectionId', ''); //强制刷新 https://blog.csdn.net/PGguoqi/article/details/90240650
      this.bidSectionList = []
      const {roadId} = this.form
      this.getBidSectionList(roadId)
    },

    handleEdit(sdf) {

    },
    // 数据查询
    async queryList() {
      let action = getDamageList
      if(this.dataType === 'slope'){
        action = getSlopeList
      }
      const res = await action(this.form)
      this.tableList = res.data?.records || []
      this.form.page = Number(res.data?.current)
      this.form.total = Number(res.data?.total)
    }
  }
}
</script>
<style lang="less" scoped>

  .page_header {
    padding: 10px 40px;
    background-color: #EEF4FF;
    color: #6680C1;

    & > em {
      padding-left: 20px;
    }

    .page_header-wrap {
      width: 70vw;
      display: flex;

      & > div {
        padding-left: 20px;
      }
    }
  }

  /deep/ .menu_tree {
    padding: 0 40px 40px;
    border-radius: 8px;

    .el-tree-node__content {
      height: 40px;
      border-bottom: 1px solid #3cc891;
    }

    .menu_node {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .menu_node-label {
        // width: 300px;
        // flex-shrink: 0;
      }

      .menu_node-content {
        display: flex;
        width: 70vw;
      }
    }
  }

  .s-white {
    color: #FFFFFF;
  }

  .change-type {
    margin-bottom: 20px;

    .el-radio-group {
      font-size: 0;
      border-radius: 5px;
      box-shadow: 0 0 5px 3px rgb(43 115 175);
    }
  }
</style>
